<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="safePhoneNumber h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#FF7C00" color="#FFFFFF" title="安全号设置" left-icon="left" @clickLeft="back" />
    </view>
    <view class="contentBox" :style="globalData.appStyle.contentStyle">
      <view class="contentWithFooter" :style="contentWithFooterStyle">
        <uni-forms ref="form" :modelValue="formData" class="“mt10”">
          <view class="phone_content">
            <uni-forms-item label="手机号" label-width="100px" name="safePhoneNumber">
              <view class="flr fla flb">
                <input type="text" v-model="formData.safePhoneNumber" class="input" placeholder="请输入手机号" maxlength="11" />
                <SMSCountdown :phoneNumber="formData.safePhoneNumber" :totalSeconds="60"></SMSCountdown>
              </view>
            </uni-forms-item>
          </view>
          <view class="content_line"></view>
          <uni-forms-item label="验证码" label-width="100px" name="verificationCode">
            <view class="flr fla flb">
              <input type="text" v-model="formData.verificationCode" class="input" placeholder="请输入验证码" />
            </view>
          </uni-forms-item>
        </uni-forms>
      </view>
      <FixedBottomBtn v-if="showFixedBottom" @btnFun="submit" />
    </view>
  </view>
</template>
<script>
import SMSCountdown from '@/component/SMSCountdown.vue';
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
import FixedBottomBtn from '@/component/FixedBottomBtn.vue';
export default {
  mixins: [commonMxins],
  data() {
    return {
      showFixedBottom: true,
      formData: {
        safePhoneNumber: '',
        verificationCode: ''
      }
    };
  },
  components: { SMSCountdown, FixedBottomBtn },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async submit() {
      this.$refs.form
        .validateField(['safePhoneNumber'])
        .then(async res => {
          let resp = await api.request({ url: '/appUser/updateAppUser', data: { ...this.formData } });
          if (resp.code === 200) {
            uni.showToast({ title: '提交成功', icon: 'success', duration: 1500 });
            this.getAuthInfo();
          } else {
            uni.showToast({ title: '提交失败', icon: 'error', duration: 1500 });
          }
        })
        .catch(err => {
          console.log(222);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.safePhoneNumber {
  .contentBox {
    .contentWithFooter {
      padding: 12rem;
      box-sizing: border-box;
    }
    .input {
      height: 32rem;
    }
  }
}
</style>
